import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import {
  GlobalModalBodyWrapper,
  GlobalModalFooterWrapper,
  GlobalModalHeaderWrapper,
  GlobalModalWrapper
} from './style'

interface IProps {
  children?: ReactNode
  visible: boolean
  title?: string
  headerBgc?: string
  totalW?: number
  totalH?: number
  confirmText?: string
  cancelText?: string
  closeLoginModal?: () => void
  confirmLoginModal?: () => void
}

const GolbalModal: FC<IProps> = (props) => {
  const { visible, title, headerBgc, totalW = 500, totalH = 300, confirmText, cancelText } = props

  // 点击取消
  const cancel = () => {
    props.closeLoginModal && props.closeLoginModal()
  }
  // 点击确定
  const confirm = () => {
    props.confirmLoginModal && props.confirmLoginModal()
  }
  return (
    <>
      {visible && (
        <GlobalModalWrapper $totalH={totalH} $totalW={totalW}>
          <GlobalModalHeaderWrapper $headerBgc={headerBgc}>
            <div className="title">{title}</div>
            <span className="close">x</span>
          </GlobalModalHeaderWrapper>

          <GlobalModalBodyWrapper>
            {
              props.children && props.children
            }
          </GlobalModalBodyWrapper>
          <GlobalModalFooterWrapper>
            <button className='btn' onClick={confirm}>{confirmText ? confirmText : '确定'}</button>
            <button className='btn cancel' onClick={cancel}>{cancelText ? cancelText : '取消'}</button>
          </GlobalModalFooterWrapper>

        </GlobalModalWrapper>
      )}
    </>
  )
}

export default memo(GolbalModal)
